<?php
require(VIEW.'/home/header.view.php');
?>
<link href="<?=CSS?>login.css" rel="stylesheet" type="text/css" />
<script src="<?=SCRIPT?>md5.js"></script>
<script language="JavaScript">
<!--
if (top.location != self.location)top.location=self.location; //防止被框架
$(document).ready(function(){
	// 加载动画
	var login = $('#login');
	var height = $(window).height();
	if (height > 554) {
		var ph = (height - 554) / 2;
		login.animate({top: ph + 'px'}, 500);
	} else {
		login.css('margin-bottom', '30px').animate({top: '30px'}, 500);
	}
	
	// 表单处理
	var username = $('input[name=username]');
	var password = $('input[name=password]');
	var remember = $('input[name=remember]');
	var verificv = $('input[name=verifycode]');
	var submit = $('#submit');
	var error_value = $('#error_value');
	var requesting = false;
	var input_event = function(dom) {
		dom.bind('focus', function() {
			$(this).parent().addClass('focus');
		});
		dom.bind('blur', function() {
			$(this).parent().removeClass('focus');
		});
	};
	input_event(username);
	input_event(password);
	input_event(verificv);
	document.onkeydown = function(e) {
		var ev = document.all ? window.event : e;
		if (ev.keyCode == 13) submit.trigger('click');
	}
	submit.bind('click', function() {
		var t = $(this).find('span');
		var error_tip = function(val) {
			error_value.text(val).parent().slideDown();
			setTimeout(function() {
				error_value.parent().slideUp(function() {
					t.fadeOut(function() {
						$(this).text('登录').fadeIn(function() {
							requesting = false;
						});
					});
				});
			}, 2000);
		};
		if (requesting) return false;
		requesting = true;
		t.fadeOut(function() {
			$(this).text('登录中...').fadeIn(function() {
				$.ajax({
					url: window.location.href,
					type: 'POST',
					cache: false,
					dataType: 'html',
					data: {vcode: verificv.val(), username: username.val(), password: password.val(), remember: remember.attr('checked') === 'checked' ? '1' : '0'},
					error: function() {
						error_tip('请求失败，请重试');
					},
					success: function(data, textStatus, xhr) {
					    console.log(data);
						var error_message = xhr.getResponseHeader('X-Error-Message');
						if (error_message) {
							error_tip(decodeURIComponent(error_message));
						} else {
							login.fadeOut(function() {
								window.location.href = '/';
							});
						}
					},
				});
			});
		});
	});
});
//-->
</script>
<div id="login">
	<div class="container">
		<div class="body clearfix">
			<div class="content">
				<h1 class="logo"></h1>
				<h2>请输入您的帐号和密码登录到系统管理</h2>
					<div id="form">
						<input type="text" class="hide">
						<input type="password" class="hide">
						<div class="input trans">
							<span class="icon icon-user"></span>
							<input value="<?=$username?>" type="text" autocomplete="off" name="username" placeholder="请输入账户名" title="账户名">
						</div>
						<div class="input trans">
							<span class="icon icon-key"></span>
							<input type="password" autocomplete="off" name="password" placeholder="请输入登录密码" title="登录密码">
						</div>
                        <div class="input trans" style="position:relative;">
							<span class="icon icon-key"></span>
							<input type="text" autocomplete="off" name="verifycode" placeholder="请输入验证码" title="验证码" value="">
                            <span class="verificationcode"><img align="absmiddle" id="verificationcode" onClick="this.src='/user/verificationcode?'+(new Date()).getTime()" title="看不清楚，换一张图片" src="/user/verificationcode?<?=$this->time?>" width="72" height="24"/></span>
						</div>
						<div class="bottom">
							<label></label>
							<button id="submit"><span>登录</span></button>
						</div>
						<div class="error">
							<span class="icon-attention-alt"></span>
							<span class="text" id="error_value"></span>
						</div>
					</div>
			</div>
		</div>
		<div class="footer">
			<span class="icon-html5"></span>建议您使用IE8以上等支持HTML5的浏览器
		</div>
	</div>
</div>
<?php
require(VIEW.'/home/footer.view.php');
?>